import { motion } from 'framer-motion';
import { useLanguage } from '@/contexts/LanguageContext';

// Testimonial data with translation keys
const testimonials = [
  {
    id: 1,
    name: "Sarah Johnson",
    country: "United States",
    textKey: "testimonial1",
    avatar: "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Woman%20face%20avatar%20professional&sign=4cab70c5bc9e0fd554613391d9f9c211"
  },
  {
    id: 2,
    name: "Michael Chen",
    country: "Canada",
    textKey: "testimonial2",
    avatar: "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Man%20face%20avatar%20professional&sign=187a5acd8a145d47324b6b00b90219c7"
  },
  {
    id: 3,
    name: "Emma Rodriguez",
    country: "Spain",
    textKey: "testimonial3",
    avatar: "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Woman%20face%20avatar%20professional&sign=4cab70c5bc9e0fd554613391d9f9c211"
  }
];

export default function TestimonialSection() {
  const { t } = useLanguage();
  
  return (
    <section className="py-20 bg-blue-50">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16">
          <motion.h2 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
            className="text-3xl md:text-4xl font-bold text-gray-900 mb-4"
          >
            {t('testimonialsTitle')}
          </motion.h2>
          <motion.p 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            viewport={{ once: true }}
            className="text-gray-600 max-w-2xl mx-auto"
          >
            {t('testimonialsSubtitle')}
          </motion.p>
        </div>
        
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {testimonials.map((testimonial, index) => (
            <motion.div
              key={testimonial.id}
              className="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition-shadow"
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
              viewport={{ once: true }}
            >
              <div className="flex items-center mb-4">
                <img 
                  src={testimonial.avatar} 
                  alt={testimonial.name}
                  className="w-12 h-12 rounded-full object-cover mr-4"
                />
                <div>
                  <h4 className="font-semibold text-gray-800">{testimonial.name}</h4>
                  <p className="text-sm text-gray-500">{testimonial.country}</p>
                </div>
              </div>
              <div className="text-yellow-400 mb-3">
                {[...Array(5)].map((_, i) => (
                  <i key={i} className="fa-solid fa-star"></i>
                ))}
              </div>
              <p className="text-gray-600 italic">"{t(testimonial.textKey)}"</p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}